<template>
  <!-- 启动程序，默认是TestOne组件，5秒动态加载并注册TestTwo组件，component 切换为TestTwo组件 -->
  <component :is="componentName" :num="num" @changeNum="changeNum"></component>
  <h2>直接编写</h2>
  <test-one :num="num" @changeNum="changeNum"/>
  <test-two :num="num" @changeNum="changeNum"/>
</template>
<script setup>
import {ref, onMounted} from "vue";
import TestOne from "@/components/TestOne.vue";
import TestTwo from "@/components/TestTwo.vue";

const componentName = ref(null);
const num = ref(0);
onMounted(async () => {
  // 异步加载组件
  const moduleName = 'TestOne';
  loadModule(moduleName);

  setTimeout(() => {
    loadModule('TestTwo');
  }, 5000);
});


const loadModule = async (moduleName) => {
  // import 后面是文件路径
  const module = await import(`./components/${moduleName}.vue`);
  componentName.value = module.default;
}

const changeNum = () => {
  num.value++;
}
</script>
